<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">{{title}}</view>
		</view>
		<form>
			<view class="cu-form-group" v-if="info.id">
				<view class="title">模版ID</view>
				<view class="text-gray padding-right-sm">{{info.id}}</view>
			</view>
		    <view class="cu-form-group">
				<view class="title">模版名称</view>
				<input placeholder="请填写(必填项)" v-model="info.title"></input>
		    </view>
			<view class="cu-form-group">
				<view class="title">钱包最低余额(元)</view>
				<input placeholder="请填写(必填项)" v-model="info.minWalletPrice"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">最大充电时长(分钟)</view>
				<input placeholder="请填写(必填项)" v-model="info.maxChargeTimesMinute"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">预警充电额度(度)</view>
				<input placeholder="请填写(必填项)" v-model="info.maxChargeElectricity"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">时间套餐</view>
				<input type="digit" placeholder="请填写小时数" v-model="newTime"></input>
				<button class="cu-btn bg-orange shadow" @click="btnAddTimeSetMeal()">添加</button>
			</view>
			<view class="cu-form-group">
				<view class="flex">
					<view v-for="(timee,timei) in info.timeSetMeal" :key="timei" class="cu-tag round sm bg-orange" @click="btnDelTimeSetMeal()">{{timee}}</view>
				</view>
			</view>
			<view class="table bg-white">
				<view class="th">
					<view class="td flex-sub">功率范围</view>
					<view class="td flex-sub">标准价格</view>
					<view class="td">操作</view>
				</view>
				<view class="tr" v-for="(coste,costi) in info.pimItems" :key="costi">
					<view class="td flex-sub">{{coste.minPower}}W-{{coste.maxPower}}W</view>
					<view class="td flex-sub">{{coste.price}}元/小时</view>
					<view class="td">
						<button class="cu-btn bg-orange sm" @click="btnDelPimItems(costi)"><text class="cuIcon-delete"></text></button>
					</view>
				</view>
				<view class="tr">
					<view class="td flex-sub flex">{{newPim.minPower}}W-<input type="digit" v-model="newPim.maxPower"/>W</view>
					<view class="td flex-sub flex"><input type="digit" v-model="newPim.price"/>元/小时</view>
					<view class="td">
						<button class="cu-btn bg-orange sm" @click="btnAddPimItems()"><text class="cuIcon-add"></text></button>
					</view>
				</view>
			</view>
			<view class="cu-bar btn-group margin-top">
			    <button class="cu-btn bg-grey shadow-blur round" @click="$utils.toBack()">取消</button>
				<button class="cu-btn bg-orange shadow-blur round" @click="btnSaveSubmit()">确定</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'新增充电插座价格模版',
				info:{
					timeSetMeal:[],
					pimItems:[]
				},
				newPim:{
					minPower:0
				}
			};
		},
		onLoad(option) {
			const _self = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('fromData', function(data) {
			    console.log(data)
				_self.info = Object.assign({},data);
				
				const length = data.pimItems.length;
				_self.newPim.minPower= data.pimItems[length-1].maxPower;
				if(data.id){
					_self.title = "修改充电插座价格模版";
				}
			})
		},
		methods:{
			//添加费率
			btnAddPimItems(){
				const newPim = this.newPim;
				const pimItems = this.info.pimItems;
				console.log(newPim.minPower,newPim.maxPower,newPim.minPower>=newPim.maxPower)
				if(parseFloat(newPim.minPower)>=parseFloat(newPim.maxPower)){
					uni.showToast({title:'请输入正确范围的值',icon:'none'})
					return
				}
				if(parseFloat(newPim.price)<=0){
					uni.showToast({title:'金额必须大于零',icon:'none'})
					return
				}
				pimItems.push(newPim);
				this.newPim = {
					minPower:newPim.maxPower,
					maxPower:0,
					price:0
				}
			},
			//删除费率
			btnDelPimItems(index){
				let element =null;
				const pimItems = this.info.pimItems;
				if(index==0){
					element = pimItems.shift();
					if(pimItems.length>0){
						pimItems[0].minPower=0;	
					}else{
						this.newPim.minPower = 0;
					}
				}else if(index==pimItems.length-1){
					element = pimItems.pop();
					this.newPim.minPower = element.minPower;
				}else{
					element = pimItems.splice(index,1);
					pimItems[index].minPower = pimItems[index-1].maxPower;
				}
			},
			//添加时间套餐
			btnAddTimeSetMeal(){
				if(!this.newTime || this.newTime<=0){
					uni.showToast({title:'时间必须大于0',icon:'none'})
					return
				}
				if(this.info.timeSetMeal.indexOf(this.newTime)>-1){
					uni.showToast({title:'该套餐已经存在',icon:'none'})
					return
				}
				this.info.timeSetMeal.push(this.newTime);
			},
			//删除时间套餐
			btnDelTimeSetMeal(index){
				this.info.timeSetMeal.splice(index,1);
			},
			btnSaveSubmit:function(){
				let newPim = this.newPim;
				let info = this.info;
				if(!info.title){
					uni.showModal({
						title:'温馨提示',
						content:'请填写模板标题',
						showCancel:false
					})
					return;
				}
				if(!info.minWalletPrice){
					uni.showModal({
						title:'温馨提示',
						content:'请填写钱包最低余额',
						showCancel:false
					})
					return;
				}
				if(!info.maxChargeTimesMinute){
					uni.showModal({
						title:'温馨提示',
						content:'请填写充电时长',
						showCancel:false
					})
					return;
				}
				if(!info.maxChargeElectricity){
					uni.showModal({
						title:'温馨提示',
						content:'请填写充电额度',
						showCancel:false
					})
					return;
				}
				if(info.timeSetMeal.length==0){
					uni.showModal({
						title:'温馨提示',
						content:'请填写时间套餐',
						showCancel:false
					})
					return;
				}
				if(info.pimItems.length==0){
					uni.showModal({
						title:'温馨提示',
						content:'请填写费用比率',
						showCancel:false
					})
					return;
				}
				
				console.log(info);
				const _self = this;
				const api = this.$request;
				api.post(api.url.cdczFeeSave,info,res=>{
					console.log(res);
					if(res.code==200){
						uni.showToast({
							title:'保存成功',
							icon:'success'
						})
						setTimeout(function(){
							uni.navigateBack();
						},1000)
					}else if(res.msg){
						uni.showModal({
							title:'保存失败',
							content:res.msg,
							showCancel:false
						})
					}else {
						uni.showToast({
							title:'保存失败',
							icon:'error'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
.container .cu-form-group{text-align:right;}

.table{margin-bottom:20rpx;border-top:1rpx solid #e0e0e0;border-right:1rpx solid #e0e0e0;line-height:48rpx;}
.table .th,.tr{display:flex;justify-content:space-between;align-items:center;border-bottom:1rpx solid #e0e0e0;}
.table .th{font-weight:600;line-height:60rpx;}
.table .td{text-align:center;border-left:1rpx solid #e0e0e0;padding:5rpx 0;}

.table .td:last-child{width:100rpx;}

.table .tr .td.flex{padding: 12rpx 0;display: flex;justify-content: center;align-items: center;}
.table .tr .td.flex input{display: block;width: 80rpx;background-color: #e0e0e0;margin: 0 4rpx;font-size: 28rpx;}
</style>
